<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div id="top" align="right" style="width: 90%">
        <span v-if="!login.success">
            <span style="color: red;">{{login.errorMsg}}</span>
            账号：<input type="text" v-model="login.code"/>
            密码：<input type="password" v-model="login.pass"/>
            <button @click="userLogin">登陆</button>
        </span>
        <span v-else>
            欢迎,{{login.name}}的访问！
            <a href="cart.html">查看购物车</a>
            <a href="#" @click="logout">注销</a>
        </span>
    </div>
    <br/><br/><br/>
    <div id="main">
        <table width="80%" align="center">
            <caption><a href="index.html">返回</a></caption>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <tr v-for="(g,i) in carts">
                <th>{{i + 1}}</th>
                <th>{{g.goods.data.goodsName}}</th>
                <th>¥{{g.goods.data.goodsPrice}}元</th>
                <th>
                    <span @click="updateCart(g.goods.data.id,g.num-1)">-</span>
                    <input type="number" style="width: 80px" v-model="g.num" min="1" max="100" @change="updateCart(g.goods.data.id,g.num)"/>
                    <span @click="updateCart(g.goods.data.id,g.num+1)">+</span>
                    {{g.goods.data.goodsUnit}}
                </th>
                <th>¥{{g.num*(g.goods.data.goodsPrice-0)}}元</th>
                <th><a href="#" @click="removeCart(g.goods.data.id)">删除</a></th>
            </tr>
            <tr>
                <td colspan="6" align="right">
                    总价：¥{{totalPrice}}元
                    <button onclick="location.href='order.html'">订单确认</button>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/vue.before.index.js"></script>